<template>
    <!--顶部菜单-->
    <div class="top_menu">
        <div :class="$parent.menuState?'titles':'title'">
            <span v-if="!$parent.menuState">HT后台管理系统2.0v</span>
            <span v-else>HT</span>
        </div>
        <ul>
            <li class="li_left">
                <i :class="$parent.menuState?'el-icon-s-unfold':'el-icon-s-fold'"
                   @click="$parent.menuState=!$parent.menuState"></i>
            </li>
            <li>
                <el-dropdown @command="handleCommand">
                      <span class="el-dropdown-link" style="color: white">
                             {{userInfo.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="updatePass">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </li>
        </ul>
        <updatePassword ref="updatePassword"></updatePassword>
    </div>
</template>

<script>
    import * as c from '@/util/config'
    import * as u from '@/util/util'

    export default {
        name: "index",
        components: {
            'updatePassword': () => import('@/components/user/updatePassword.vue'),
        },
        data() {
            return {
                //用户信息
                userInfo: u.getSession(c.sessionKey.USER_INFO),
            }
        },
        methods: {
            //下拉菜单触发时间
            handleCommand(command) {
                switch (command) {
                    case 'updatePass':
                      this.$refs.updatePassword.openDia();
                      break
                    case 'userInfo':
                      break
                    case 'logout':
                        this.$confirm('是否确认退出登录1?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$HttpService.get("/logout").then(res => {
                                this.$util.clearSession();
                                //清空顶部导航
                                this.$store.dispatch("closeAll")
                                this.$router.push('/login')
                            })
                        }).catch(() => {});
                      break
                }
            },
        }
    }
</script>

<style scoped lang="scss">
    .top_menu {
        width: 100%;
        height: 50px;
        display: flex;
        background: #334157;

        .title {
            width: 200px;
            text-align: center;
            font-size: 20px;
            color: white;
            line-height: 50px;
            cursor: pointer;
        }

        .titles {
            width: 65px;
            text-align: center;
            font-size: 20px;
            color: white;
            line-height: 50px;
            cursor: pointer;
        }

        ul {
            flex: 1;
            width: 100%;
            height: 100%;
            padding: 0 20px;
            color: #fff;
            list-style-type: none;
            text-align: right;
        }

        .li_left {
            float: left;
            font-size: 20px;
        }

        .el-icon-s-fold:hover, .el-icon-s-unfold:hover {
            color: #169bd5;
        }

    }
</style>
